<template>
  <div class="order-detail">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'MallOrderList' }">
        商品订单列表
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        商品订单详情
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 展示内容 -->
    <!-- 顶部展示订单内容 -->
    <div class="header-order">
      <span>订单编号：{{ info.orderId }}</span>
      <span>订单类型：{{ $selectFormat['mallOrderTypeSl'](info.orderKind).label }}</span>
      <span>订单来源：{{ $selectFormat['mallOrderPlatformSl'](info.platform).label }}</span>
    </div>
    <!-- 展示订单状态和订单流程 -->
    <div class="order-info box">
      <div class="row">
        <div class="col-left">订单状态</div>
        <div class="col-right">订单流程</div>
      </div>
      <hr />
      <div class="row">
        <div class="col-left">
          <p>{{ $selectFormat['mallOrderStatusSl'](info.orderStatus).label }}</p>
          <el-button
            type="primary"
            v-if="orderClosed.includes(info.orderStatus)"
            @click="cloesdOrder"
          >
            订单关闭
          </el-button>
          <el-button type="primary" v-if="deliverGoods.includes(info.orderStatus)" @click="deliver">
            发货配置
          </el-button>
          <el-button type="primary" v-if="afterSale.includes(info.orderStatus)" @click="afterBuy">
            售后处理
          </el-button>
          <el-button type="primary" v-if="delOrder.includes(info.orderStatus)" @click="deleteOrder">
            删除订单
          </el-button>
        </div>
        <div class="col-right">
          <el-steps align-center>
            <el-step
              v-for="(item, index) in info.steps"
              :key="index"
              :title="item.title"
              :description="item.createdAt"
              :status="item.status ? (item.createdAt ? 'success' : 'wait') : 'error'"
            ></el-step>
          </el-steps>
        </div>
      </div>
    </div>
    <!-- 这里显示的是物流信息框 -->
    <div class="box">
      <Logistics :isTetail="isTetail" :info="info"></Logistics>
    </div>
    <!-- 这里显示的是购买信息 -->
    <div class="buy-info box">
      <div class="row">
        <div class="col-left">
          购买信息
          <el-button type="primary" @click="toUserDetail(info.uid)">查看用户</el-button>
        </div>
        <div class="col-right">收货信息</div>
      </div>
      <hr />
      <div class="row">
        <div class="col-left" v-if="info.buyer">
          <div>购买用户ID:{{ info.uid }}</div>
          <div>购买用户昵称:{{ info.buyer.nickname }}</div>
          <div>联系方式:{{ info.buyer.phone }}</div>
          <div>支付方式:{{ $selectFormat['mallOrderPaySl'](info.payType).label }}</div>
        </div>
        <div class="col-right" v-if="info.receiver">
          <div>联系人:{{ info.receiver.receiver }}</div>
          <div>联系方式:{{ info.receiver.receiverPhone }}</div>
          <div>收货地址:{{ info.receiver.receiverAddress }}</div>
        </div>
      </div>
    </div>
    <!-- 这里显示的是卖家信息 -->
    <div class="sale-info box">
      <div class="row">
        <div class="col-left">
          卖家信息
          <el-button type="primary" @click="toUserDetail(info.sellerUid)">查看用户</el-button>
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-left" v-if="info.seller">
          <div>卖家用户ID:{{ info.sellerUid }}</div>
          <div>卖家用户昵称:{{ info.seller.nickname }}</div>
        </div>
      </div>
    </div>
    <!-- 这里显示的是商品信息 -->
    <div class="goods-info box">
      <div class="row">
        <div class="col-left">
          订单商品
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-left">
          <el-table :data="info.skus" style="width: 100%" border>
            <el-table-column prop="productId" label="商品ID" align="center"></el-table-column>
            <el-table-column prop="id" label="商品信息" align="center">
              <template slot-scope="scope">
                <div class="goods-img">
                  <div class="goods-left">
                    <img
                      v-if="scope.row.productCover"
                      :src="scope.row.productCover"
                      alt=""
                      class="goods"
                    />
                  </div>
                  <div class="goods-right">
                    <div>{{ scope.row.productTitle }}</div>
                    <div class="diff-color" v-if="scope.row.skuPath">
                      <span v-for="(item, index) in scope.row.skuPath.split('^V^')" :key="index">
                        {{ index % 2 ? item : '' }}
                      </span>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="单价" align="center">
              <template slot-scope="scope">￥{{ scope.row.price }}</template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
            <el-table-column prop="totalPrice" label="小计" align="center">
              <template slot-scope="scope">￥{{ scope.row.totalPrice }}</template>
            </el-table-column>
          </el-table>
          <!-- 结算信息 -->
          <div class="goods-total">
            开具过发票：
            <el-switch
              @change="chInvoiced"
              v-model="info.invoiced"
              active-text="是"
              inactive-text="否"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
            <!-- <span>开具过发票：{{ info.invoiced ? '是' : '否' }}</span> -->
            <span>商品总额：￥{{ info.totalAmount }}</span>
            <span>运费：￥{{ info.deliverPrice }}</span>
            <span>实付款：￥{{ info.payAmount }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 这里是备注信息 -->
    <div class="note-info box">
      <div class="row">
        <div class="col-left">
          订单备注
          <span>{{ info.remarkAt }}</span>
          <span v-if="info.remarkOperator">({{ info.remarkOperator }})</span>
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-left">
          {{ info.remarkContent }}
          <div><el-button type="primary" @click="editNote">编辑备注</el-button></div>
        </div>
      </div>
    </div>
    <!-- 这里是返回按钮 -->
    <div class="back"><el-button type="primary" @click="back">返回</el-button></div>
    <!-- dialog -->
    <el-dialog
      :title="dailogTitle"
      :visible="dialogVisible"
      width="60%"
      @close="dialogCancel"
      :append-to-body="true"
      :destroy-on-close="true"
    >
      <component
        :is="componentId"
        :info="infoMessage"
        @dialogCancel="dialogCancel"
        @dialogSubmit="dialogSubmit"
      ></component>
    </el-dialog>
  </div>
</template>
<script>
  import EditMixins from 'mixins/Edit';
  import Logistics from './components/Logistics';
  import AfterSale from './components/AfterSale';
  import Deliver from './components/Deliver';
  import Note from './components/Note';
  export default {
    mixins: [EditMixins],
    components: {
      Logistics,
      AfterSale,
      Deliver,
    },
    data() {
      return {
        // 组件传递下去的信息
        infoMessage: null,
        // 绑定的组件是哪个
        componentId: '',
        // dialog
        dialogVisible: false,
        // dialog标题
        dailogTitle: '',
        // 是否展示编辑按钮
        isTetail: true,
        // 不同的订单状态展示不同的编辑按钮
        orderClosed: [0],
        deliverGoods: [1, 2],
        afterSale: [1, 9],
        delOrder: [7, 8],
      };
    },
    methods: {
      // 删除订单
      deleteOrder() {
        this.$confirm('确认删除这条数据吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$service.MallOrderDelete({ id: this.info.id }).then((res) => {
              this.$message.success('删除成功！');
              this.$tabs.open({ name: 'MallOrderList'});
            });
          })
          .catch(() => {});
      },
      // 是否开具过发票
      chInvoiced(val) {
        this.$service.MallOrderMake({ id: this.info.id }).then((res) => {
          this.$message.success('操作成功！');
          this.getInfo();
        });
      },
      // 编辑备注
      editNote() {
        this.dialogVisible = true;
        this.dailogTitle = '编辑备注';
        this.componentId = Note;
        this.infoMessage = JSON.parse(JSON.stringify(this.info));
        this.$set(this.infoMessage, 'remark', this.infoMessage.remarkContent);
      },
      // 售后处理
      afterBuy() {
        this.dialogVisible = true;
        this.dailogTitle = '选择售后处理方式';
        this.componentId = AfterSale;
        this.infoMessage = this.info.id;
      },
      // 发货配置
      deliver() {
        // 这列得先得到收获信息然后一起传下去
        this.$service.MallOrderReceiver({ id: this.info.id }).then((res) => {
          this.dialogVisible = true;
          this.dailogTitle = '';
          this.componentId = Deliver;
          let _ = res ? res : {};
          _.id = this.info.id;
          _.companyCode = _.companyCode || '';
          _.logisticNo = _.logisticNo || '';
          this.infoMessage = JSON.parse(JSON.stringify(_));
        });
      },
      // 订单关闭
      cloesdOrder() {
        this.$confirm('确定要关闭所选的订单吗？', '请确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            // 7对应后台关闭
            this.$service.MallOrderClose({ id: this.info.id, orderStatus: 7 }).then((res) => {
              this.$message.success('关闭成功！');
            });
          })
          .catch(() => {});
      },
      // dialog取消
      dialogCancel() {
        this.dialogVisible = false;
        this.dailogTitle = '';
        this.componentId = '';
        this.infoMessage = '';
      },
      // dialog提交
      dialogSubmit() {
        // 取消
        this.dialogCancel();
        // 刷新一下
        this.getInfo();
      },
      // 返回
      back() {
        this.$tabs.open({ name: 'MallOrderList' });
      },
      // 跳转去用户详情
      toUserDetail(val) {
        this.$tabs.open({ name: 'UserManagerDetail', params: { uuid: val } });
      },
      // 得到数据
      getInfo() {
        if (!this.id || this.$route.name != 'MallOrderDetail' || this.infoGetting) return;
        this.infoGetting = true;
        this.$service
          .MallOrderInfo({ id: this.$route.params.id })
          .then((res) => {
            this.info = { ...res };
          })
          .finally(() => {
            this.infoGetting = false;
          });
      },
    },
  };
</script>
<style lang="less" scoped>
  .order-detail {
    // 公共的
    .box {
      border: 1px solid #dcdfe6;
      padding: 10px 0px;
      border-radius: 5px;
      margin-bottom: 20px;
    }
    hr {
      border: 1px solid #dcdfe6;
      border-bottom: 0px;
    }
    .row {
      display: flex;
      padding: 10px 20px;
      .col-left {
        width: 30%;
        p {
          font-size: 20px;
          font-weight: bolder;
        }
      }
      .col-right {
        width: 70%;
        border-left: 1px solid #dcdfe6;
      }
    }
    .goods-img {
      display: flex;
      .goods-right {
        margin-left: 10px;
      }
    }
    // 图片
    .goods {
      width: 60px;
      height: 60px;
      max-width: none;
      border-radius: 0px;
    }
    // 私有的
    .header-order {
      span {
        font-size: 18px;
        font-weight: bold;
        margin-right: 20px;
      }
    }
    // 顶部展示订单内容
    .order-info {
      text-align: center;
      .col-left {
        /deep/ .el-button {
          margin-top: 10px;
        }
      }
    }
    // 这里显示的是购买信息
    .buy-info {
      .col-left {
        width: 50%;
        /deep/ .el-button {
          margin-left: 200px;
        }
      }
      .col-right {
        padding-left: 20px;
        width: 50%;
      }
    }
    // 这里显示的是卖家信息和商品信息
    .sale-info,
    .goods-info {
      .col-left {
        width: 100%;
        /deep/ .el-button {
          margin-left: 200px;
        }
      }
    }
    // 这里显示的是备注信息
    .note-info {
      .col-left {
        width: 100%;
        span {
          margin-left: 20px;
          color: #409eff;
        }
        /deep/ .el-button {
          margin-top: 20px;
          margin-left: 90%;
        }
      }
    }
    // 结算栏
    .goods-total {
      background-color: #dcdfe6;
      text-align: right;
      padding: 10px 20px;
      span {
        margin-left: 100px;
      }
    }
    // 返回
    .back {
      margin-top: 20px;
      text-align: center;
    }
  }
</style>
